<template>
	<div class="container">
		<div style="width: 100%;display: flex;flex-direction: row;align-items: center;">
			<div class="selectBox">
				<div>筛选节点：</div>
				<el-select v-model="form.ip" filterable placeholder="请选择" clearable>
					<el-option v-for="item in ItemOptions" :key="item.num" :label="item.label" :value="item.ip">
					</el-option>
				</el-select>
			</div>
			<div class="selectBox">
				<div>类型：</div>
				<el-select v-model="form.type" filterable placeholder="请选择" clearable>
					<el-option v-for="item in typeList" :label="item" :value="item">
					</el-option>
				</el-select>
			</div>
			<div class="selectBox">
				<div style="width: 140px;text-align: center;">告警信息：</div>
				<el-input placeholder="请输入内容" v-model="form.name" clearable>
				</el-input>
			</div>
			<template>
				<div style="margin-left: 15px;">选择时间：</div>
				<div class="block">
					<!-- <el-date-picker v-model="value" :picker-options="expireTimeOPtion" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker> -->
					<el-date-picker v-model.lazy="chooseTime" :picker-options="expireTimeOPtion"
						value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
			</template>
			<div style="margin-left: 20px;">
				<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				<el-button type="warning" icon="el-icon-refresh" @click="reset">重置</el-button>
			</div>
		</div>
		<div class="table">
			<template>
				<el-table :data="tableData" stripe style="width: 100%" :header-cell-style="headClass"
					:cell-style="rowClass" :default-sort="{prop: 'recordTime', order: 'descending'}">
					<el-table-column prop="num" label="序号" width="100">
					</el-table-column>
					<!-- <el-table-column prop="ip" label="IP" width="200">
					</el-table-column> -->
					<el-table-column prop="ip" label="IP" width="350">
					</el-table-column>
					<el-table-column prop="type" label="类型" width="250">
					</el-table-column>
					<el-table-column prop="alertinfo" label="告警信息" width="450">
						<template slot-scope="scope">
							<div v-if="scope.row.alertinfo != null">
								{{scope.row.alertinfo}}
							</div>
							<div v-else>
								无
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="recordTime" label="日志状态" width="150">
						<template slot-scope="scope">
							<div v-if="scope.row.available == 'Y'"
								style="display: flex;flex-direction: row;justify-content: center;">
								<div class="greenBox">
									正常
								</div>
							</div>
							<div v-else style="display: flex;flex-direction: row;justify-content: center;">
								<div class="redBox">
									故障
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="recordTime" label="故障/恢复正常时间" width="330" sortable>
						<!-- <template slot-scope="scope">
							<div v-if="scope.row.available == 'Y'">{{scope.row.recordTime}}</div>
							<div v-else>无</div>
						</template> -->
					</el-table-column>
				</el-table>
			</template>
		</div>
	</div>
</template>

<script>
	import {
		getJavaServerData,
		postJavaServerData
	} from "@/api/index.js";
	export default {
		created() {
			this.firstTime()
			this.initTableData();
			this.getTableData()
		},
		data() {
			return {
				ItemValue: "",
				ItemOptions: [],
				loading: false,
				tableData: [],
				chooseTime: [],
				typeList: [],
				form: {
					name: '',
					ip: '',
					type: '',
					time: '',
					time2: new Date(),
					pageNum: 1,
					pageSize: 10000000
				},
				expireTimeOPtion: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的 
					}
				},
			};
		},
		methods: {
			initTableData() {
				this.loading = true;
				getJavaServerData("/Sp/homeable", {
					pageNum: 1,
					pageSize: 1000 * 10,
				}).then((res) => {
					const key = Object.keys(res)
					let array = Object.keys(res).map(key => res[key])
					this.ItemOptions = array[0]
					array[0].forEach((item, index) => {
						let a = item.type + '/' + item.ip
						this.ItemOptions[index].label = a
					})
					console.log(this.ItemOptions)
				});
			},
			firstTime() {
				let time = Date.parse(new Date(this.form.time2))
				let startTime = parseInt(time) - 3600000 * 30 * 24
				this.form.time = this.changeTime(startTime)
				this.form.time2 = this.changeTime(time)
				this.chooseTime[0] = this.changeTime(startTime)
				this.chooseTime[1] = this.changeTime(time)
				console.log(this.form.time)
			},
			changeTime(timestamp) {
				let date = new Date(parseInt(timestamp));
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
			},
			async getTableData() {

				let res = await postJavaServerData("/Sp/Faultlogselect", this.form)
				// console.log(123,res)
				const key = Object.keys(res)
				let array = Object.keys(res).map(key => res[key])
				this.tableData = array[0]
				this.tableData.forEach((item, index) => {
					item.num = index + 1
					this.typeList.push(item.type)
				})
				this.typeList = Array.from(new Set(this.typeList))
				console.log(123, this.tableData)
				// this.tableData = res
				// return new Promise((resolve, reject) => {
				// 	getJavaServerData("/Sp/Faultlogselect",this.form)
				// 		.then((_) => resolve(_))
				// 		.catch((e) => reject(e));
				// });
			},
			search() {
				if(this.chooseTime){
					if (this.chooseTime.length == 0) {
						this.form.time = ''
						this.form.time2 = ''
					} else {
						this.form.time = this.chooseTime[0]
						this.form.time2 = this.chooseTime[1]
					}
				}else{
					this.form.time = ''
					this.form.time2 = ''
				}
				this.getTableData()
			},
			reset() {
				this.chooseTime = []
				this.form.time = ''
				this.form.time2 = ''
				this.form.name = ''
				this.form.type = ''
				this.getTableData()
			},

			headClass() { //表头居中显示
				return "text-align:center;font-size:14px;color:black"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center"
			}
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .el-table__body tr,
	::v-deep .el-table__body td {
		padding: 0;
		height: 50px;
		font-size: 12px;
	}

	.redBox {
		width: 50px;
		height: 25px;
		background-color: red;
		border-radius: 5px;
		text-align: center;
		line-height: 25px;
		color: ghostwhite;
	}

	.selectBox {
		width: 300px;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 10px;
	}

	.greenBox {
		width: 50px;
		height: 25px;
		background-color: seagreen;
		border-radius: 5px;
		text-align: center;
		line-height: 25px;
		color: ghostwhite;
	}
</style>
